<template>
<!--    发票预览-->
    <div class="invoicePrint">
<!--        <div class="heightBox"></div>-->
        <table class="tableSty" frame=void cellspacing=0 cellpadding="0" cols=12 rules=none border=0 width="1200" style="margin: 0 auto;position: relative;opacity: 1" >
            <div class="bottomRightBox">
                <img v-if="flag==2" src="../../assets/img/ticket/2.png" alt="">
                <img v-if="flag==3" src="../../assets/img/ticket/3.png" alt="">
                <img v-if="flag==4" src="../../assets/img/ticket/4.png" alt="">
            </div>
            <div class="topCenterBox">
                <img src="../../assets/img/ticket/1.png" alt="">
            </div>
            <div class="topLeftBox">
                <img src="../../assets/img/ticket/qrcode.png" alt="">
            </div>
            <div class="topRightBox">
                <div>{{data.invoiceNum}}</div>
                <div style="font-size: 16px">{{data.serialNum}}</div>
            </div>
            <div class="leftList">
                <div v-for="i in 18" class="leftListBox"></div>
            </div>
            <div class="rightList">
                <div v-for="i in 18" class="rightListBox"></div>
            </div>
            <!--            <colgroup><col width=48><col width=37><col width=73><col width=49><col width=128><col width=88><col width=82><col width=36><col width=67><col width=123><col width=69><col width=167></colgroup>-->
            <tbody>
            <tr>
                <td width=48 height=50 align=left><br/>
                    <div class="leftBox"></div></td>
                <td width=37 align=left valign=middle><br/></td>
                <td colspan=3 rowspan=2 width=250 align=center valign=middle sdval="4100104140" sdnum="2052;"><b><font size=5 color="#795a5a" class="song">{{data.invoiceNum}}</font></b></td>
                <td width=50></td>
                <td style="border-bottom: 1px solid #000000;position: relative;padding:0;"  colspan=3 width=273 align=center valign=middle ><b>
                    <font face="Kai" size=5 color="#795a5a">
                        {{data.invoiceAddLabel}}</font></b>
                    <div style="width: 100%;height: 1px;background: #795a5a;position: absolute;bottom: -5px;"></div>

                </td>
                <!--                <td></td>-->
                <!--                <td rowspan=2 width=123 align=right valign=middle><b></b></td>-->
                <td colspan=3 rowspan=2 width=236 align=center valign=middle sdval="29505342" sdnum="2052;">
                    <b>
                        <font style="font-family: 方正粗黑宋简体!important;" face="方正粗黑宋简体" size=5 color="#333333">NO </font>
                        <font class="bold" face="arial rounded mt bold" size=5 color="#333399">{{data.serialNum}}</font>
                    </b>

                </td>
                <td width=48 height=50 align=right><br/><div class="rightBox"></div></td>

            </tr>
            <tr >
                <td height=30 align=left><br>
                    <div class="leftBox"></div>
                </td>
                <td align=left valign=middle ><br/></td>
                <td width=60></td>

                <td style="padding:0;" colspan=3 rowspan=2 align=center valign=middle>
                    <b><font face="Kai" size=4 color="#795a5a">{{data.invoiceLabel}}</font></b>
                </td>
                <!--                <td></td>-->
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>
            <tr>
                <td height=19 align=left><br/></td>
                <td width=37 align=left valign=middle><br/></td>

                <td align=left valign=middle width=30><br/></td>
                <td align=left valign=middle width=60><br/></td>
                <td align=left valign=middle width="135px"><br/></td>
                <td align=left valign=middle width=50px><br/></td>
                <td style="border-bottom: 1px solid #000000" align=right valign=middle></td>
                <td style="border-bottom: 1px solid #000000" colspan=2 align=right valign=middle sdval="40878" sdnum="2052;2052;[$-804]yyyy年m月d日"><font face="adobe Kai std r" color="#795a5a">开票日期：</font><font size=2 color="#333399">{{data.kpDate}}</font></td>
            </tr>
            <tr>
                <td height=24 align=left><br/><div class="leftBox"></div>
                </td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" rowspan=4 align=center valign=middle><font face="Kai" color="#795a5a">购<br/><br/>买<br/><br/>方</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000" colspan=2 align=right valign=middle><div style="width: 120px"><font  face="Kai" color="#795a5a">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        称：</font></div></td>
                <td style="border-top: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.fkdwName}}</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 40px" rowspan=4 align=center valign=middle><font face="Kai" color="#795a5a">密<br/><br/>码<br/><br/>区</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;padding: 10px" colspan=4 rowspan=4 align=left valign=top>
                    <div style="width:100%;font-family: inherit!important;letter-spacing:4px;overflow: hidden">
                      <font  size=3 color="#0b33a1">
                        *76737/4>
                        82>9-4<>0
                        --6-8-817
                        67*6+0
                          >/
                        54*6/880+1<<*7>809730/4701<8<5125
                          23<>124848</890<56<22>/516618*2078104
                        *76737/4>
                        82>9-4<>0
                        --6-8-817
                        67*6+0
                        >/
                        54*6/880+1<<*7>809730/4701<8<5125
                        23<>124848</890<56<22>/51661
                    </font>
                    </div>
                </td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>

            <tr>
                <td rowspan=2 height=34 align=left><br>
                    <div class="leftBox"></div>
                </td>
                <td style="border-left: 1px solid #000000" colspan=2 align=right valign=right><font face="Kai" color="#795a5a">纳税人识别号：</font></td>
                <td style="border-right: 1px solid #000000" colspan=3 align=left valign=middle sdnum="2052;0;@"><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.fknsrsbh}}</font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>
            <tr>
                <td height="34" style="border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">地 址、电 话：</font></td>
                <td style="border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.fkdz}} {{data.fkPhone}}</font></td>
            </tr>
            <tr>
                <td rowspan=2 height=34 align=left><br/><div class="leftBox"></div>
                </td>
                <td style="border-bottom: 1px solid #000000; border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">开户行及账号：</font></td>
                <td style="border-bottom: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.fkkhBankName}} {{data.fkkhBankNum}}</font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>

            <tr>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=center valign=middle height="24"><font face="Kai" color="#795a5a">货物或应税劳务名称</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 100px" align=center valign=middle><font face="Kai" color="#795a5a">规格型号</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align=center valign=middle><font face="Kai" color="#795a5a">单位</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 180px" align=center valign=middle><font face="Kai" color="#795a5a">数量</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 140px" colspan=2 align=center valign=middle><font face="Kai" color="#795a5a">单价</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 100px"  align=center valign=middle><font face="Kai" color="#795a5a">金额</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;width: 60px;" align=center valign=middle><font face="Kai" color="#795a5a">税率</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align=center valign=middle><font face="Kai" color="#795a5a">税额</font></td>
            </tr>
            <tr v-for="(item,index) in data.cargoAddList" :key="index">
                <td height=24 align=left><br>
                    <div class="leftBox"></div>
                </td>
                <td style=" border-left: 1px solid #000000;border-right: 1px solid #000000" colspan=3 align=center valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.cargoName}}</font></td>
                <td style="border-right: 1px solid #000000" align=center valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.spec}}</font></td>
                <td style="border-right: 1px solid #000000" align=center valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.unit}}</font></td>
                <td style="border-right: 1px solid #000000" align=center valign=middle sdval="1" sdnum="2052;0;0.00_ "><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.num}} </font></td>
                <td style="border-right: 1px solid #000000" colspan=2 align=center valign=middle sdval="2180" sdnum="2052;0;0.00_ "><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.price}} </font></td>
                <td style="border-right: 1px solid #000000" align=center valign=middle sdval="2180" sdnum="2052;0;_ * #,##0.00_ ;_ * -#,##0.00_ ;_ * &quot;-&quot;??_ ;_ @_ "><font face="仿宋_gb2312" size=2 color="#0b33a1"> {{item.money}} </font></td>
                <td style="border-right: 1px solid #000000" align=center valign=middle sdval="0.17" sdnum="2052;0;0%"><font face="仿宋_gb2312" size=2 color="#0b33a1">{{item.rate?item.rate*100+'%':""}}</font></td>
                <td style=" border-right: 1px solid #000000" align=center valign=middle sdval="370.6" sdnum="2052;0;_ * #,##0.00_ ;_ * -#,##0.00_ ;_ * &quot;-&quot;??_ ;_ @_ "><font face="仿宋_gb2312" size=2 color="#0b33a1"> {{item.tax}} </font></td>
                <td align=right><div class="rightBox"></div></td>

            </tr>


            <tr>
                <td height=24 align=left><br/></td>
                <td style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=center valign=middle><font face="Kai" color="#795a5a">合      计</font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=left valign=middle><font face="仿宋_gb2312" size=2><br/></font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=left valign=middle><font face="仿宋_gb2312" size=2><br/></font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=left valign=middle><font face="仿宋_gb2312" size=2><br/></font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" colspan=2 align=left valign=middle><font face="仿宋_gb2312" size=2><br/></font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=center valign=middle sdval="2180" sdnum="2052;0;&quot;&yen;&quot;#,##0.00;&quot;&yen;&quot;-#,##0.00"><font face="仿宋_gb2312" size=2 color="#0b33a1">&yen;{{data.moneyTotal}}</font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1"><br/></font></td>
                <td style="border-left: 1px solid #000000; border-right: 1px solid #000000" align=center valign=middle sdval="370.6" sdnum="2052;0;&quot;&yen;&quot;#,##0.00;&quot;&yen;&quot;-#,##0.00"><font face="仿宋_gb2312" size=2 color="#0b33a1">&yen;{{data.taxTotal}}</font></td>
            </tr>
            <tr>
                <td height=24 align=left><br>
                    <div class="leftBox"></div>
                </td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=center valign=middle><font face="Kai" color="#795a5a">价税合计（大写）</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000" colspan=5 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.leviedTotalUp}}</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000" align=right valign=middle><font face="Kai" color="#795a5a">（小写）</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000" colspan=2 align=left valign=middle sdval="2550.6" sdnum="2052;0;&quot;&yen;&quot;#,##0.00_);[red](&quot;&yen;&quot;#,##0.00)"><font face="仿宋_gb2312" size=2 color="#0b33a1">&yen;{{data.leviedTotal}} </font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>


            <tr>
                <td rowspan=2 height=34 align=left><br/><div class="leftBox"></div>
                </td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000" rowspan=4 align=center valign=middle><font face="Kai" color="#795a5a">销<br/><br/>售<br/><br/>方</font></td>
                <td style="border-top: 1px solid #000000; border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        称：</font></td>
                <td style="border-top: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.xsdwName}}</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000" rowspan=4 align=center valign=middle><font face="Kai" color="#795a5a">备<br/><br/><br/>注</font></td>
                <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;padding: 10px" colspan=4 rowspan=4 align=left valign=top><font face="仿宋_gb2312" color="#0b33a1" size=2>{{data.remark}}<br/></font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>
            <tr>
                <td height="34" style="border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">纳税人识别号：</font></td>
                <td style="border-right: 1px solid #000000" colspan=3 align=left valign=middle sdnum="2052;0;@"><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.xsnsrsbh}}</font></td>
            </tr>
            <tr>
                <td rowspan=2 height=34 align=left><br>
                    <div class="leftBox"></div>
                </td>
                <td style="border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">地 址、电 话：</font></td>
                <td style="border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.xsdz}} {{data.xsPhone}}</font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>
            <tr>
                <td  height=34 style="border-bottom: 1px solid #000000; border-left: 1px solid #000000" colspan=2 align=right valign=middle><font face="Kai" color="#795a5a">开户行及账号：</font></td>
                <td style="border-bottom: 1px solid #000000; border-right: 1px solid #000000" colspan=3 align=left valign=middle><font face="仿宋_gb2312" size=2 color="#0b33a1">{{data.xskhBankName}} {{data.xskhBankNum}}</font></td>
            </tr>
            <tr style="padding-top: 3px">
                <td rowspan=2 height=41 align=left><br/><div class="leftBox"></div>
                </td>
                <td style="border-top: 1px solid #000000" colspan=2 align=center><font face="Kai" color="#795a5a">收款人：</font></td>
                <td align=left ><font face="Kai" size=2 class="peopleStyle">{{data.skr}}<br/></font></td>
                <td align=center ><font face="Kai" color="#795a5a">复核：&nbsp;<font face="Kai" size=2 class="peopleStyle">{{data.fhr}}<br/></font></font></td>
                <td align=left></td>
                <td align=right width=100><font face="Kai" color="#795a5a">开票人：</font></td>
                <td align=left colspan="2" ><font face="Kai" size=2 class="peopleStyle">{{data.kpr}}<br/></font></td>
                <!--                <td align=left><font face="Kai" size=2><br/></font></td>-->
                <td style="border-top: 1px solid #000000" colspan=2 align=center><font face="Kai" color="#795a5a">销货方：（章）</font></td>
                <td align=left><font face="仿宋_gb2312"><br/></font></td>
                <td align=right><br/><div class="rightBox"></div></td>

            </tr>

            <tr>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
                <td align=left><br/></td>
            </tr>

            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                url:"",
                data:{},
                flag:''
            }
        },
        mounted(){
            this.getData()
        },
        methods:{
            DX(n){
                if(n==0){
                    return " "
                }
                if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
                    return"数据非法";
                var unit="仟佰拾亿仟佰拾万仟佰拾元角分",str="";
                n += "00";
                var p= n.indexOf('.');
                if(p >=0)
                    n=n.substring(0,p)+n.substr(p+1,2);
                unit=unit.substr(unit.length-n.length);
                for(var i=0; i<n.length; i++)
                    str +='零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i))+unit.charAt(i);
                return str.replace(/零(仟|佰|拾|角)/g,"零").replace(/(零)+/g,"零").replace(/零(万|亿|元)/g,"$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g,"").replace(/元$/g,"元整").replace(/角$/g,"角整");
            },
            getData(){
                this.data = JSON.parse(localStorage.getItem('ticketData'))
                this.data.leviedTotalUp = this.DX(this.data.leviedTotal)
                if(this.data.cargoAddList){
                    let length = this.data.cargoAddList.length
                    let num = 5
                    if(length<num){
                        console.log(num-length)
                        for(var i=0; i<(num-length);i++){
                            this.data.cargoAddList.push({})
                            console.log('sdsadasdasdasd',i)
                        }
                    }

                }else{
                    this.data.cargoAddList = [{},{},{},{},{}]
                }
                if(this.data.xsdwName.includes('金港')){
                    this.flag = '2'
                }else  if(this.data.xsdwName.includes('大港')){
                    this.flag = '3'

                }else  if(this.data.xsdwName.includes('东港')){
                    this.flag = '4'

                }else{
                    this.flag = ''
                }
                // 01：记账联，02：发票联，03：抵扣联
                if(this.data.invoiceType=='01'){
                    this.data.invoiceLabel = '记账联'
                }else if(this.data.invoiceType=='02'){
                    this.data.invoiceLabel = '发票联'
                }else if(this.data.invoiceType=='03'){
                    this.data.invoiceLabel = '抵扣联'
                }else{
                    this.data.invoiceLabel = ''
                }
                // 发票类型（01：普通发票,02：专用发票）
                if(this.data.invoiceAddType=='01'){
                    this.data.invoiceAddLabel = '江苏增值税普通发票'
                }else if(this.data.invoiceType=='02'){
                    this.data.invoiceAddLabel = '江苏增值税专用发票'
                }else{
                    this.data.invoiceAddLabel = ''
                }
            },
        },
        destroyed() {
            localStorage.clear()
        }
    }
</script>

<style scoped>
    .invoicePrint{
        /*padding: 0 2% 0 2%;*/
        height: 100%;
        z-index: 4000;
        /*background: #000;*/
        /*opacity: 0.5;*/

    }
    *{
        font-family:Kai!important;
        border-color: #795a5a!important;
    }
    .invoicePrint tr td{
        padding-left: 3px;
        padding-right: 5px;
    }
    .leftBox{
        width: 15px;
        height: 15px;
        border-radius: 30px;
        border: 0;
    }
    .rightBox{
        width: 15px;
        height: 15px;
        border-radius: 30px;
        border: 0;
    }
    .kai{
        font-family: Kai;
    }
    .song{
        font-family: "Songti SC"!important;
    }
    .bold{
        font-family: "Arial Rounded MT Bold"!important;
    }
    .fang{
        font-family:'仿宋_GB2312'!important;

    }
    .peopleStyle{
        color: #0b33a1!important;
        font-size: 16px;
    }
    .topRightBox{
        position: absolute;
        top: 48px;
        right: 55px;
        color: #0b33a1!important;
        text-align: right;
    }
    .topLeftBox{
        position: absolute;
        top: 18px;
        left: 55px;
        color: #0b33a1!important;
    }
    .topCenterBox{
        top: -45px;
        position: absolute;
        left: 455px;
        color: #0b33a1!important;
    }
    .bottomRightBox{
        bottom: -56px;
        position: absolute;
        right: 49px;
    }
    .bottomRightBox img{
        /*width: 100px;*/
        /*height: 80px;*/
        transform: scale(0.6, 0.6) rotate(-7deg);

    }
    .topCenterBox img{
        /*width: 100px;*/
        /*height: 80px;*/
        transform: scale(0.4, 0.4);
    }
    .leftList{
        width: 50px;
        position: absolute;
        left: 0;
    }
    .rightList{
        width: 50px;
        position: absolute;
        right: 0;
    }
    .leftListBox{
        margin:17px 35px 17px 0;
        width: 15px;
        height: 15px;
        border-radius: 35px;
        border: 1px dashed #b39999!important;
    }
    .rightListBox{
        margin:17px 0 17px 35px;
        width: 15px;
        height: 15px;
        border-radius: 35px;
        border: 1px dashed #b39999!important;
    }
    .tableSty{
    }
    .heightBox{
        height: 100px;
    }
</style>
<style>
    .el-dialog{
        margin-top: 8vh!important;
    }
</style>